<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <style>
    .style {
      font-style: italic;
    }

    .red {
      background: red;
    }

    .yellow {
      color: yellow;
    }

    .bold {
      font-weight: bold;
    }

    .bd {
      border: 1px solid #000;
    }

    .active {
      box-shadow: 3px 3px 3px 3px pink;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 
      什么时候使用动态类？当类名是通过数据来控制是否添加的时候，才会使用动态类
      当动态类只有一个类的时候 可以直接使用三元表达式 返回一个字符串即可
     -->
    <div class="style" :class="isMove?'active':''">案例一</div>
    <div class="style" :class="className">案例2</div>

    <!-- 
      当动态类的类有一个或者多个的时候（固定个数） 可以给动态类设置一个对象 每一个类名都是对象的key,值是一个布尔值 代表是否开启当前的类

     -->
    <div class="style" :class="{active:isActive,bold:isMove,db:isHover}">案例三</div>
    <div class="style" :class="{active:isMove}">案例四</div>

    <!-- 当动态类的类有一个或者多个 不确定数量的时候 可以使用数组 只要在数组中的类都会添加到DOM上。不能开启和关闭 但是可以操作数组来控制类 -->
    <div class="style" :class="classArr">案例五</div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          person: {
            name: "xiaowang",
            age: 15
          },
          isMove: true,
          isHover: true,
          isActive: true,
          className: "active",
          classArr: ["active", "db", "bold"]
        };
      }
    })
  </script>
</body>

</html>